<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- jsx -->
    <!-- <div id="box" class="odiv">
        <ul class="oul">
            <li>1</li>
            <li>2</li>
            <li>3</li>
        </ul>
        8888888
    </div> -->


    <script>
        // react   ---   虚拟dom(用来描述dom结构的对象)

        // 数组 

        let box = document.getElementById('box')


        let domInfo = {
            tagName: "div",
            props: {
                id: 'box',
                class: 'odiv'
            },
            children: [
                {
                    tagName: 'ul',
                    props: {
                        class: 'oul'
                    },
                    children: [
                        {
                            tagName: 'li',
                            props: {
                                style: {
                                    color: 'green',
                                    background: 'skyblue'
                                }
                            },
                            children: ['1']
                        },
                        {
                            tagName: 'li',
                            props: {},
                            children: ['2']
                        },
                        {
                            tagName: 'li',
                            props: {},
                            children: ['3']
                        }
                    ]
                },
                '8888888'
            ]
        }
        
        // 把虚拟dom转换为真实的dom结构
        
        // 1. 参数
        // 2. 返回值
        // 3. 函数的功能
        function VdomToRealDom(Vdom) {
            // 解构赋值
            let { tagName, props, children } = Vdom
            // 1. 根据tagName创建节点
            let Rdom = document.createElement(tagName)
            // 2. 根据Props给Rdom添加属性
            Object.keys(props).forEach(item => {
                Rdom.setAttribute(item, props[item])
            })
            // 3. 给Rdom添加子节点(两种情况)
            children.forEach(item => {
                // 3.1(文本节点的情况)
                if (typeof item === 'string') {
                    // createTextNode(文本内容)
                    let oText = document.createTextNode(item)
                    Rdom.appendChild(oText)
                } else {
                    // 3.2(标签的情况)
                    // 递归调用
                    Rdom.appendChild(VdomToRealDom(item))
                }
            })
            return Rdom
        }

        document.body.appendChild(VdomToRealDom(domInfo))

        

        // let info = {
        //     name: '张三',
        //     age: 18
        // }
        // Object.keys(obj)
        // Object.values(obj)

        // 作业
        // class可以写成数组的形式
        // style可以写成对象的形式
    </script>
</body>
</html>